<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>花生地铁-登录</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
    <script src="${path}/resources/dist/js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
    <!-- jquery -->
    <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
    <script src="${path}/resources/dist/js/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
</head>
<body>
<div id="app">
    <template>
    <div class="login-wrap">
        <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px"
                 class="demo-ruleForm login-container">
            <h3 class="title">用户登录</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="账号">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码">
                </el-input>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="imgCode">
                        <el-input type="text" v-model="ruleForm.imgCode" auto-complete="off" placeholder="图形验证码"
                                  @keyup.enter.native="submitForm('ruleForm')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="code-box">
                    <img :src="imgsrc" alt="" class="codeimg" @click="getcode">
                </el-col>
            </el-row>
            <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')"
                           :loading="logining">登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
    </template>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            //定义loading默认为false
            logining: false,
            // 记住密码
            rememberpwd: false,
            imgsrc: '',
            ruleForm: {
                //username和password默认为空
                username: '',
                password: '',
                randomStr: '',
                imgCode: ''
            },
            //rules前端验证
            rules: {
                username: [{
                    required: true,
                    message: '请输入账号',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }],
                imgCode: [{
                    required: true,
                    message: '请输入验证码',
                    trigger: 'blur'
                }],

            }
        },
        // 里面的函数只有调用才会执行
        methods: {
            //获取info列表
            submitForm(formName) {
                axios.post("${path}/login.do", "method=login&username=" + this.ruleForm.username + "&pwd=" + this.ruleForm.password + "&imgCode=" + this.ruleForm.imgCode).then(response => {
                    if (response.data === "登录成功") {
                        location.href = "${path}/page/main.jsp";
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: response.data
                        });
                    }
                });
            },
            getcode() {
                axios.get('/captcha.do', {
                    responseType: 'arraybuffer',
                }).then(response => {
                    return 'data:image/png;base64,' + btoa(
                        new Uint8Array(response.data)
                            .reduce((data, byte) => data + String.fromCharCode(byte), '')
                    );
                }).then(data => {
                    this.imgsrc = data
                })
            },
            setCookie(c_name, c_pwd, exdays) {
                var exdate = new Date(); //获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie = "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
            getCookie() {
                if (document.cookie.length > 0) {
                    this.rememberpwd = true;
                    var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
                    for (var i = 0; i < arr.length; i++) {
                        var arr2 = arr[i].split("="); //再次切割
                        //判断查找相对应的值
                        if (arr2[0] == "userName") {
                            this.ruleForm.username = arr2[1]; //保存到保存数据的地方 （data中）
                        } else if (arr2[0] == "password") {
                            this.ruleForm.password = arr2[1];
                        }
                    }
                }
            },
            clearCookie(){
                this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
            }
        },
        watch:{
            rememberpwd(val){
                console.log(val)
                if (val) {    //如果选中了记住密码的选项
                    this.setCookie(this.ruleForm.username, this.ruleForm.password, 7);
                }
                else {
                    this.clearCookie()
                }
            }
        },
        mounted() {
            this.getcode()
            this.getCookie()

        },

    })
</script>
</body>
</html>
